<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.body{width: 470px;z-index:5;
				position: absolute;
			      		left: 0;
			      		top: 0;
			
			
			}
			.fatie,.fabu{width: 120px;height: 30px;
			       background-color: red;
			       color: white;
			       text-align: center;
					border: 1px solid black;
					border-radius: 8px;
					
			       }
			      #p1{width: 470px;
			           border-bottom: 1px dotted red;
			           }
			      #p2{width: 470px;
			           border-bottom: 1px dotted red;	
			           }     
			      .wz{float: right;}
			      #fabu{border: 1px solid black;
			      		width:400px;
			      		height: 350px;
			      		position: absolute;
			      		left: 150px;
			      		top: 30px;
			      		display: none;
			      		z-index: 10;
			      }
			      ul li{list-style: none;}
		</style>
	</head>
	<body>
		
		<div id="fabu">
				<input type="text"  placeholder="请输入标题（1-50个字符）" style="width: 300px;"/><br />
				
				<span>所属板块：</span>
				<select id="xiala">
					<option >请选择板块</option>
					<option >新课来了</option>
					<option >新手报到</option>
					<option >职业规划</option>
				</select>
				<br />
				<textarea cols="40" rows="15" id="wenben"></textarea>
				<div class="fabu" onclick="fabu();">发布</div>
			</div>
			<div class="body">
			<div class="fatie" onclick="fatie();">我要发帖</div>
			<hr />
			<ul id="ul">
				<li id="p1">
				<img src="img/tou04.jpg"/>
				<p class="wz">
					<span class="bt">如何学习web前端开发教程</span><br /><br />
					<span class="bk">板块:职业规划</span> 
					<span class="time"> 发表时间:2016-7-13 17:15</span>
				</p>
				
			</li>
			<li id="p2">
				<img src="img/tou03.jpg"/>
				<p class="wz">
				<span>如何学习课工厂课程</span><br /><br />
				<span class="bk">板块:新课来了</span> 
				<span class="time">发表时间:2016-7-13 17:15</span>
				</p>
			</li>
			</ul>
		</div>
		<script type="text/javascript">
			function fatie(){
				var fabu=document.getElementById("fabu");
				fabu.style.display="block";
				
				
			}
			function fabu(){
				var pelement=document.getElementById("fabu");
				pelement.style.display="none";
				 var biaoti=pelement.firstElementChild.value;
				var bankuai=document.getElementById("xiala").options[document.getElementById("xiala").selectedIndex].value;
				var wenbenyu=document.getElementById("wenben").value;
				//时间
				var time=new Date();
				var year=time.getFullYear();
				var month=parseInt(time.getMonth())+1;
				var day=time.getDate();
				var hour=time.getHours();
				var minute=time.getMinutes();
				var s=time.getSeconds();
				var timestr=year+"-"+month+"-"+day+"\t"+hour+":"+minute+":"+s;
				//图片
				var arr=new Array("img/tou01.jpg","img/tou02.jpg","img/tou03.jpg","img/tou04.jpg");
				var tupian1=Math.floor(Math.random()*3);
				//新建li节点
				var ulele=document.getElementById("ul");
				var br=document.createElement("br");
				var br1=document.createElement("br");
				var liele=document.createElement("li");
				var p=document.createElement("p");
				var img=document.createElement("img");
				var span1=document.createElement("span");
				var span2=document.createElement("span");
				var span3=document.createElement("span");
				img.setAttribute("src",arr[tupian1]);
				span1.innerHTML=biaoti;
				span2.innerHTML="板块：   "+bankuai;                                           
				span3.innerHTML="   发表时间："+timestr;
				p.appendChild(span1);
				p.appendChild(br);
				p.appendChild(br1);
				p.appendChild(span2);
				p.appendChild(span3);
				liele.appendChild(img);
				liele.appendChild(p);
				liele.style.borderBottom="dashed  1px red"
				liele.style.width="470px"
				ulele.appendChild(liele);
				p.style.float="right";
			}
			
			
			
		</script>
	</body>
</html>
